<template>
  <!-- 字典数据列表 -->
  <el-table :data="currentDictDataList" border stripe class="base-table">
    <!-- 数据标签列 -->
    <el-table-column prop="label" align="center" label="字典标签" />

    <!-- 数据键值列 -->
    <el-table-column prop="value" align="center" label="字典键值" />

    <!-- 状态列 -->
    <el-table-column prop="status" align="center" label="状态">
      <template #default="scope">
        <el-tag :type="scope.row.status ? 'primary' : 'info'">
          {{ scope.row.status ? '启用' : '停用' }}
        </el-tag>
      </template>
    </el-table-column>

    <!-- 操作列 -->
    <el-table-column label="操作" width="120" align="center">
      <template #default="scope">
        <!-- 编辑按钮 -->
        <el-tooltip content="编辑字典" placement="top" effect="light">
          <el-button type="primary" link icon="Edit" @click.stop="$emit('edit', scope.row)" />
        </el-tooltip>

        <!-- 删除按钮 -->
        <el-popconfirm
          title="确定要删除该字典数据吗？"
          confirm-button-text="确定"
          cancel-button-text="取消"
          icon="Warning"
          icon-color="#ff4949"
          :title-style="{ color: '#1e293b', fontSize: '14px', fontWeight: 500 }"
          @confirm="handleDelete(scope.row)"
        >
          <template #reference>
            <el-button @click.stop type="danger" link icon="Delete" />
          </template>
        </el-popconfirm>
      </template>
    </el-table-column>
  </el-table>
</template>

<script setup>
  import { useDictApi } from '@/api/dict-api.js';
  import { RStatus } from '@/common/comstants.js';

  const dictApi = useDictApi();

  // 定义组件属性
  const props = defineProps({
    // 当前字典数据列表
    currentDictDataList: Array,
  });

  // 定义组件事件
  const emit = defineEmits(['edit', 'refresh']);

  /**
   * 删除字典数据
   * @param {Object} row 要删除的字典数据行
   */
  const handleDelete = async (row) => {
    const res = await dictApi.deleteDictData(row.dictDataId);

    if (res.status === RStatus.SUCCESS) {
      ElMessage.success(res.message);
    } else {
      ElMessage.error(res.message);
    }

    emit('refresh');
  };
</script>

<style lang="scss" scoped>
  .dict-data-table {
    width: 100%;
  }
</style>
@/api/dict-api